<template>
  <div class="myTeam" @click="showxuanze = false;">
    <ComHeader title="我的团队" leftArrow="true"/>
    <div class="team-wrap" style="line-height: 28px;">
      <!-- 我的信息 -->
      <div
        class="parentData group-item"
        v-if="parentData"
        style="position: fixed;right: 0.2rem;left: 0.2rem;top: 1.4rem;bottom: 0;"
      >
        <!-- 第一部分 -->
        <div style="border-bottom:1px solid #ccc;padding:3px;margin-bottom:5px;">
          <!-- 我的ID -->
          <p>
            <span style="width: 90px;display:inline-block;color:#000;">我的ID:</span>
            <span style="font-size: 16px;">{{myid}}</span>
          </p>
          <!-- 我的上级ID -->
          <p>
            <span style="width: 90px;display:inline-block;color:#000;">我的上级：</span>
            <span style="font-size: 16px;">{{parentData.id}}</span>
            <!-- <i class="iconfont icon-icon icon-ParentData" v-if="!isShowParentData" ></i>
            <i class="icon-arrow-down icon-ParentData" v-else><img class="max" src="../../static/icons/icon-arrow-down.png" alt="" style="width: 12px;height: 12px;"></i>-->
          </p>
          <!-- 我的上级详情 -->
          <p>
            <img :src="parentData.headimgurl" class="img30">
            <span>{{parentData.realname?parentData.realname:parentData.nickname}}</span>
            <i>{{parentData.level?parentData.level:'普通用户'}}</i>
            <i
              style="position: absolute;right: 0;"
            >{{parentData.regdate ? parentData.regdate.slice(0,10): ''}}</i>
          </p>
        </div>

        <!-- 第二部分,我的详情-->
        <div>
          <div>
            <p>
              我的团队人数：
              <span>{{tuandui}}</span> 人
              <mt-button
                type="primary"
                size="small"
                @click.stop="showyijian = !showyijian;showteam=false;"
                class="wodeanniu"
              >一键修改</mt-button>
              <!-- 点击，切换是否显示弹出框，并且将我的团队隐藏 -->
            </p>
            <p>
              我的直属下级：
              <span>{{xiaji}}</span> 人
              <!-- 点击显示，触发函数 -->
              <mt-button
                type="primary"
                size="small"
                class="wodeanniu"
                @click.stop="findfirst"
                v-if="!showteam"
              >我的下级</mt-button>
              <!-- 点击收起， -->
              <mt-button
                type="primary"
                size="small"
                class="wodeanniu"
                @click.stop="showteam=false;"
                v-if="showteam"
              >&nbsp;&nbsp;收&nbsp;&nbsp;&nbsp;起&nbsp;&nbsp;</mt-button>
            </p>
          </div>
        </div>
      </div>
      <!-- 我的团队列表 滚动翻页，需要设置定位-->
      <div v-show="showteam" class="store-box">
        <!-- 滚动组件类名，需要滚动加载的数据，数据控制开关isPullup，滚动触底函数 -->
        <scroll class="scroll" :data="arr1" :pullup="isPullup" @scrollToEnd="searchMore">
          <ul>
            <!-- 一级 这里的类名parent可以不要-->
            <li
              @click.stop.prevent="showson1(parentItem)"
              v-for="(parentItem,idx) in arr1"
              :key="idx"
              class="li-one"
              :class="{'currentClass1': idx == currentIndex1 }"
            >
              <!-- 第一行 -->
              <p>
                <img :src="parentItem.headimgurl" class="img30">
                <span>{{parentItem.nickname}}</span>
                <span style="float: right;">ID：{{parentItem.id}}</span>
              </p>
              <!-- 第二行 -->
              <p class="pindent">
                <span>{{parentItem.level}}</span>
                <span class="pindent">注册时间：{{parentItem.regdate.slice(0,10)}}</span>
                <mt-button
                  type="primary"
                  size="small"
                  class="wodeanniu"
                  @click.stop="showdengji=true;id3=parentItem.id"
                >修改等级</mt-button>
                <!-- <mt-button type="primary" size="small" class="wodeanniu" @click.stop="showxuanze=!showxuanze;caozuoid=parentItem.id">修改等级</mt-button>                   -->
              </p>
              <!-- 第三行 -->
              <p
                class="pindent"
              >直属下级：{{parentItem.xiaji}}人&nbsp;&nbsp;&nbsp;&nbsp;团队人数：{{parentItem.tuandui}}人</p>

              <!-- 二级 -->
              <div id="son" style="padding:5px 0 5px 20px;">
                <ul>
                  <div v-for="(secondParentItem,idx) in arr2" :key="idx">
                    <li
                      v-if="secondParentItem.show && parentItem.id === secondParentItem.parentId"
                      @click.stop="showson2(secondParentItem)"
                      ref
                      class="li-two"
                    >
                      <p style="position: relative;">
                        <img :src="secondParentItem.headimgurl" class="img30">
                        <span>{{secondParentItem.nickname}}</span>
                        <span style="float: right;">ID：{{secondParentItem.id}}</span>
                      </p>
                      <p class="pindent" style="position: relative;">
                        <span>{{secondParentItem.level}}</span>
                        <span>{{secondParentItem.regdate.slice(0,10)}}</span>
                        <mt-button
                          type="primary"
                          size="small"
                          class="wodeanniu"
                          @click.stop="showdengji=true;id3=secondParentItem.id"
                        >修改等级</mt-button>
                      </p>
                      <p
                        class="pindent"
                      >直属下级：{{secondParentItem.xiaji}}人&nbsp;&nbsp;&nbsp;&nbsp;团队人数：{{secondParentItem.tuandui}}人</p>

                      <!-- 三级 -->
                      <div id="son" style="padding:10px 0 10px 20px;">
                        <ul>
                          <li
                            v-for="(item,idx) in arr3"
                            :key="idx"
                            v-if="item.show && secondParentItem.id === item.parentId"
                            class="li-three"
                          >
                            <p class="pindent">
                              <img :src="item.headimgurl" class="img30">
                              <span>{{item.nickname}}</span>
                              <span style="float: right;">ID：{{item.id}}</span>
                            </p>
                            <p class="pindent">
                              <span>{{item.level}}</span>
                              <span>{{item.regdate.slice(0,10)}}</span>
                              <mt-button type="primary" size="small" class="wodeanniu">修改等级</mt-button>
                            </p>
                          </li>
                        </ul>
                      </div>
                    </li>
                    <p v-if="page2 ==1">
                      <mt-button
                        v-if="secondParentItem.show && parentItem.id === secondParentItem.parentId &&arr2.length ==idx+1"
                        type="default"
                        size="small"
                        style="width: 100%;"
                        @click.self="shownext(parentItem)"
                      >下一页</mt-button>
                    </p>
                    <p v-else>
                      <mt-button
                        v-if="secondParentItem.show && parentItem.id === secondParentItem.parentId &&arr2.length ==idx+1"
                        type="default"
                        size="small"
                        style="width: 49%;"
                        @click.self="showbefore(parentItem)"
                      >上一页</mt-button>
                      <mt-button
                        v-if="secondParentItem.show && parentItem.id === secondParentItem.parentId &&arr2.length ==idx+1"
                        type="default"
                        size="small"
                        style="width: 49%;"
                        @click.self="shownext(parentItem)"
                      >下一页</mt-button>
                    </p>
                  </div>
                </ul>
              </div>
            </li>
            <loading v-show="fenyeloading" title="加载中"></loading>
          </ul>
        </scroll>
        <!-- 暂无数据 -->
        <div v-if="!arr1" class="notData">暂无数据</div>
      </div>
      <div
        style="position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color:RGBA(0,0,0,0.3);"
        v-if="showyijian || showdengji"
        @click.self="showyijian=false;showdengji=false;"
      >
        <!-- 1、一键修改上下级 -->
        <div
          style="padding:20px 10px 50px;border-radius: 10px;background-color:RGBA(38,162,255,0.7);
            margin-top: 10px;position: absolute;right: 0.2rem;left: 0.2rem;top: 6rem;bottom: 4rem;"
          v-if="showyijian"
        >
          <mt-field class label="需要修改的ID" placeholder="需要修改的团队人员的ID" rows="2" v-model="id1"></mt-field>
          <mt-field class label="上级ID" placeholder="需要绑定上级的ID" rows="2" v-model="id2"></mt-field>
          <p style="border:0px;color:#fff;">&nbsp;&nbsp;温馨提示：只能修改我的团队下级成员</p>
          <mt-button size="small" @click="tijiao2" style="float:right;">提交</mt-button>
        </div>

        <!-- 2、修改个人等级 -->
        <div
          style="padding:20px 10px 50px;border-radius: 10px;background-color:RGBA(38,162,255,0.9);
            margin-top: 10px;position: absolute;right: 0.2rem;left: 0.2rem;top: 6rem;bottom: 4rem;"
          v-if="showdengji"
        >
          <mt-field
            class
            label="用户ID"
            placeholder="需要修改的用户ID"
            rows="2"
            v-model="id3"
            readonly="readonly"
          ></mt-field>
          <p>将当前用户的等级更改为：</p>
          <ul style="overflow: hidden;">
            <li
              v-for="(item,idx) in fenlei"
              :key="idx"
              class="fenleili"
              @click="selectLevel(item)"
              :class="{'gaoliang':item.select}"
            >{{item.name}}</li>
          </ul>
          <div>
            <p
              style="color:#fff;text-align: center;vertical-align: middle;"
            >&nbsp;&nbsp;温馨提示：只能修改我的团队下级成员</p>
          </div>
          <mt-button size="small" @click="tijiao1" style="float:right;">提交</mt-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/fetch/api";
import ComHeader from "@/common/ComHeader";
import ComFooter from "@/common/ComFooter";
import Loading from "@/base/loading/loading";
import Scroll from "@/base/scroll/scroll";
import {
  MessageBox,
  Spinner,
  Button,
  Toast,
  Picker,
  Field,
  Indicator
} from "mint-ui";
export default {
  name: "myTeam",
  data() {
    return {
      data: null,
      parentData: null,
      showteam: false,
      // 原来的isshow
      username: this.getUserId(),
      downData: null,
      showDataLoading: true,
      showNotData: false,
      downData2: null,
      isShowParentData: false,
      getlevel: "",
      myid: "",
      isPullup: true,
      isHasMore: true,
      limit: 10,
      beforeScroll: true,
      mylevel: "",
      mylevel2: "",
      tarid: "",
      id1: "",
      id2: "",
      id3: "",
      id4: "",
      page1: 1,
      page2: 1,
      showyijian: false,
      showdengji: false,
      show3: false,
      aaa: -1,
      shouxia: false,
      showxuanze: false,
      caozuoid: "",
      fenlei: [],
      slots: [
        {
          flex: 1,
          values: [
            "普通用户",
            "共享天使",
            "共享店主",
            "城市合伙人",
            "联合创始人"
          ],
          className: "slot1",
          textAlign: "center"
        }
      ],
      isshow1: false,
      isshowyijian: false,
      currentIndex1: null,
      jiantou1: true,
      tuandui: 0,
      xiaji: 0,
      arr1: [],
      arr2: [],
      arr3: [],
      // 为什么为真
      fenyeloading: false,

      // 判断是否是触底事件触发的加载事件
      ischudi: false,
      ischudi2: false,
      now: "",
      getlevelName: "", // 等级名称
      getpriority: "" // 修改的用户等级
    };
  },
  components: {
    ComHeader,
    MessageBox,
    Spinner,
    Button,
    Toast,
    Picker,
    Field,
    ComFooter,
    Loading,
    Scroll,
    Indicator
  },
  created() {
    // 获取等级数据
    this.fnGetLevel();
    // 初始化
    this.start();
    // 获得一级下级
    //this.findfirst()
  },
  methods: {
    // 选择用户等级进行修改稿
    selectLevel(item) {
      this.getlevelName = item.name;
      this.getpriority = item.priority;
      this.fenlei.forEach(items => {
        items.select = false;
      });
      item.select = true;
    },
    fnGetLevel() {
      api.getuserlevel({}).catch(res => {
        if (res.status == 200) {
          res.data.data.forEach(item => {
            item.select = false;
          });
          this.fenlei = res.data.data;
        }
      });
    },
    // 初始化
    start() {
      //获取我的推荐人（我的上级）
      const params = {
        uid: this.getUId()
      };
      api.getMySuperior(params).catch(res => {
        this.parentData = res.data;
      });

      // 获取我的ID
      this.myid = JSON.parse(
        window.localStorage.getItem(this.companyUnique)
      ).id;

      const params1 = {
        id: this.getUId()
      };
      // 团队总人数
      api.getmyteam(params1).catch(res => {
        this.tuandui = res.data.msg;
      });

      // 下级总人数
      api.getnextteam(params1).catch(res => {
        this.xiaji = res.data.msg;
      });
    },
    tijiao1() {
      var params = {
        myid: this.myid,
        tarid: Number(this.id3),
        getlevel: this.getlevelName,
        getpriority: this.getpriority
      };
      console.log(params);
      api.moduserlevel(params).catch(res => {
        Toast(res.data.msg);
        this.showdengji = false;
      });
    },
    tijiao2() {
      var params = {
        myid: this.myid,
        yuanid: Number(this.id1),
        tarid: Number(this.id2)
      };
      api.moduserpath(params).catch(res => {
        console.log(res);
        if (res.status == 200) {
          Toast(res.data.msg);
          if (res.data.msg == "修改完成") {
            this.showyijian = false;
            api.getnextteam({id: this.getUId()}).catch(res => {
              this.xiaji = res.data.msg;
            });
          }
        }
      });
    },
    // 一级下级，滚动加载函数
    searchMore() {
      // 开启加载效果
      // 分页自加
      this.page1++;
      if (this.page1 > this.page_total) {
        return;
      }
      this.fenyeloading = true;
      // 触底触发判断
      this.ischudi = true;

      // 触发加载函数
      this.findfirst();
    },

    // 查找一级下级
    findfirst() {
      // 查找一级，显示团队
      this.showteam = true;

      //  如果是从触底事件进入，则不变
      if (this.ischudi == true) {
        this.ischudi = false;
      } else {
        // 如果是从我的下级进入，则清空列表，重新加载
        this.page1 = 1;
        this.page2 = 1;
        this.arr1 = [];
        this.arr2 = [];
        this.arr3 = [];
      }

      // 如果显示下级，则不显示一键修改的弹框
      this.showyijian = false;

      // 开启加载动画（中间）
      this.fenyeloading = true;
      // 配置参数，页数为默认页数
      var params1 = {
        id: this.getUId(),
        page: this.page1
      };
      api.mytem(params1).catch(res => {
        this.page_total = res.data.page_total;
        // 没有下级的情况，数组长度为0，或者在数据没回来之前，都不要关闭加载效果
        if (!res.data.mytem.length) {
          // 关闭加载动画
          this.fenyeloading = false;
          Toast("您目前没有下级人员");
          return;
        }

        // 拼接数组，每一项加上属性show，属性值为false
        res.data.mytem.forEach(item => {
          item.show = false;
          var id = item.id;
          var tuanduinum = 0;
          var xiajinum = 0;
          var params = { id: id };
          // 团队总人数
          api.getmyteam(params).catch(res => {
            tuanduinum = res.data.msg;
            item.tuandui = tuanduinum;
          });
          // 下级总人数
          api.getnextteam(params).catch(res => {
            xiajinum = res.data.msg;
            if (!xiajinum) {
              this.fenyeloading = false;
            }
            item.xiaji = xiajinum;
          });
        });
        // 分页拼接步骤
        var arr = res.data.mytem;
        setTimeout(() => {
          this.arr1 = [...this.arr1, ...arr];
        }, 500);
      });
    },

    // 二级点击加载事件
    shownext(parentItem) {
      this.page2++;
      this.showson1(parentItem);
    },
    // 二级点击加载事件
    showbefore(parentItem) {
      this.page2--;
      this.showson1(parentItem);
    },

    // 展示二级，// 传入当前项
    showson1(item) {
      // 记录当前项的ID值，三种情况，
      // 一种是为当前ID(分页加载)，不处理
      // 一种是为空，新进入，没有点击过，记录当前ID
      // 一种是其他值，清空数组，清空当前页数，并且记录当前ID
      if (this.now == "") {
        this.now = item.id;
      }
      if (this.now != item.id) {
        this.now = item.id;
        this.page2 = 1;
        this.arr2 = [];
      }

      const params3 = {
        id: item.id,
        page: this.page2
      };
      // 用item的属性来控制元素的显示隐藏
      if (item.show == false) {
        // 显示
        Indicator.open({
          text: "加载中...",
          spinnerType: "fading-circle"
        });
        item.show = true;
        api.mytem(params3).catch(res => {
          if (!res.data.mytem.length) {
            item.show = false;
            Indicator.close();
            Toast("当前用户没有下级");
          }
          // 拼接二级元素的show属性
          res.data.mytem.forEach(item2 => {
            item2.parentId = item.id;
            item2.show = true;
            var id = item2.id;
            var tuanduinum = 9;
            var xiajinum = 9;
            var params = { id: id };
            // 团队总人数
            api.getmyteam(params).catch(res => {
              tuanduinum = res.data.msg;
              item2.tuandui = tuanduinum;
            });
            // 下级总人数
            api.getnextteam(params).catch(res => {
              xiajinum = res.data.msg;
              item2.xiaji = xiajinum;
            });
          });
          var arr = res.data.mytem;
          setTimeout(() => {
            this.arr2 = [...this.arr2, ...arr];
            Indicator.close();
          }, 1000);
        });
      } else {
        Indicator.close();
        // 隐藏
        item.show = false;
        // 新值接收
        let otherAttr = this.arr2;
        // 隐藏时，将数组设置为空
        this.arr2 = [];
        // 遍历所有元素，属性都改为false
        for (let i = 0; i < otherAttr.length; i++) {
          otherAttr[i].show = false;
        }
        // 覆盖原值
        this.arr2 = otherAttr;
      }
    },

    // 一键修改上下级，提交
    tijiao() {
      this.myid = JSON.parse(
        window.localStorage.getItem(this.companyUnique)
      ).id;
      this.id1 = Number(this.id1);
      this.id2 = Number(this.id2);
      var params = {
        myid: this.myid,
        yuanid: this.id1,
        tarid: this.id2
      };
      api.moduserpath(params).catch(error => {
        // 没有找到该ID名
        Toast({
          message: error.data.msg,
          position: "center",
          duration: 1000
        });
        const params2 = {
          // username: this.username,
          id: this.getUId()
        };
        api.getMyTeam(params2).catch(res => {
          this.print(res);
          this.info = res.data.msg;
          if (res.response && res.response.status == 500) {
            this.showDataLoading = false;
            this.showNotData = true;
          } else {
            for (var i = 0; i < res.data.mytem.length; i++) {
              var mytem = res.data.mytem[i];
              mytem.showteam = false;
            }
            this.showDataLoading = false;
            this.data = res.data;
          }
        });
      });
      this.showyijian = false;
    },
    // 滚动组件，修改内容
    onValuesChange(picker, values, a) {
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
      if (values == "普通用户") {
        this.mylevel2 = 0;
      } else if (values == "共享天使") {
        this.mylevel2 = 1;
      } else if (values == "共享店主") {
        this.mylevel2 = 2;
      } else if (values == "城市合伙人") {
        this.mylevel2 = 3;
      } else if (values == "联合创始人") {
        this.mylevel2 = 4;
      }
      if (this.mylevel2 <= this.mylevel) {
        this.mylevel2 = Number(this.mylevel2);
        var params = {
          myid: this.myid,
          tarid: this.tarid,
          getlevel: this.mylevel2
        };
        api
          .moduserlevel(params)
          .then(res => {})
          .catch(error => {
            if (error.data.msg != "修改成功") {
              // this.ss = true;
              // this.text = error.data.msg
              // setTimeout(()=>{
              // this.ss = false;
              // },3000)
              Toast({
                message: error.data.msg,
                position: "center",
                duration: 1000
              });
            }
            const params2 = {
              // username: this.username,
              id: this.getUId()
            };
            api.getMyTeam(params2).catch(res => {
              this.print(res);
              this.info = res.data.msg;
              if (res.response && res.response.status == 500) {
                this.showDataLoading = false;
                this.showNotData = true;
              } else {
                for (var i = 0; i < res.data.mytem.length; i++) {
                  var mytem = res.data.mytem[i];
                  mytem.isShow = false;
                }
                this.showDataLoading = false;
                this.data = res.data;
              }
            });
          });
      } else {
        Toast({
          message: "权限不足",
          position: "center",
          duration: 1000
        });
      }
    },

    // 修改等级函数
    xiugaidengji() {
      var e = window.event || e;
      var target = e.target || e.srcElement;
      this.tarid = Number(target.parentElement.id);
      this.myid = JSON.parse(
        window.localStorage.getItem(this.companyUnique)
      ).id;
      var level = JSON.parse(window.localStorage.getItem(this.companyUnique))
        .level;
      if (level == "普通用户") {
        this.mylevel = 0;
      } else if (level == "共享天使") {
        this.mylevel = 1;
      } else if (level == "共享店主") {
        this.mylevel = 2;
      } else if (level == "城市合伙人") {
        this.mylevel = 3;
      } else if (level == "联合创始人") {
        this.mylevel = 4;
      }
      this.showxuanze = true;
    }
  }
};
</script>



<style lang="stylus" scoped>
div.team-wrap {
  padding: 0.4rem;
  padding-top: 1.45rem;
}

.parentData, .team-total p {
  font-size: 0.4rem;
  border-bottom: 1px solid #ddd;
  padding: 0.2rem 0;

  span {
    color: #ff555f;
  }
}

.group-name {
  margin-top: 0.77em;
  margin-bottom: 0.3em;
  color: #666;
  font-size: 0.36rem;
}

.group-item {
  padding: 0.2rem 0;

  .icon-arrow-down {
    width: 0.4rem;
    height: 0.4rem;
    display: inline-block;
  }

  .item-avatar img {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 1rem;
    /* overflow: hidden; */
  }

  .item-level {
    font-size: 0.3rem;
    color: #555;
    margin-left: 0.1rem;

    .icon-level {
      width: 0.4rem;
      margin-top: -0.1rem;
      height: 0.4rem;
      vertical-align: middle;
      margin-right: 0.1rem;
    }
  }

  .item-regdate {
    font-size: 0.25rem;
    color: #999;
  }
}

.group-item-btn {
  border: 1px solid #25b5fe;
  color: #25b5fe;
  padding: 0.06rem;
  vertical-align: bottom;
  border-radius: 0.1rem;
  font-size: 0.3rem;
}

.down-main {
  padding-left: 0.6rem;

  .group-item-down {
    padding: 0.2rem 0;
    color: #666;
  }
}

.nextnum {
  background: #999;
  color: #fff;
  border-radius: 1rem;
  display: inline-block;
  width: 0.4rem;
  text-align: center;
  height: 0.4rem;
}

.group-item-btn {
  margin-left: 0.2rem;
}

.dataLoading {
  width: 7rem;
  margin: 1rem auto;
  border: 1px solid #ccc;
  padding: 20px 50px;
  text-align: center;
  background-color: #ddd;
  border-radius: 0.5rem;
}

.notDown {
  padding-top: 0.2rem;
  color: #777;
}

.downData2 {
  padding-left: 1rem;
}

.icon-ParentData {
  float: right;
}

.xiugai {
  background-color: #999;
  opacity: 0.7;
  border-radius: 0.6rem;
  width: 80%;
  margin: 0 auto;
  padding: 40px 10px;
  height: 150px;
}

.btn {
  float: right;
  border-radius: 0.5rem;
  height: 0.7rem;
}

.tishikuang {
  background-color: #ddd;
  border-radius: 0.65rem;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 2rem;
}

.wodeanniu {
  float: right;
  height: 20px;
}

.store-box {
  position: fixed;
  top: 6rem;
  width: 100%;
  bottom: 0;
  left: 0rem;
  right: 0rem;
}

.scroll {
  height: 100%;
  overflow: hidden;
}

.li-one {
  margin: 10px 5px;
  border-radius: 10px;
  background-color: #fff;
  padding: 5px;
  border: 2px solid #999;
}

.li-two {
  margin: 10px 0 10px 5px;
  border-radius: 10px;
  background-color: #fff;
  padding: 5px 2px;
  border: 2px solid #ccc;
}

.li-three {
  margin: 10px 0 10px 5px;
  border-radius: 10px;
  background-color: #fff;
  padding: 5px 0;
}

p {
  position: relative;
}

.pindent {
  text-indent: 0.9rem;
}

.img30 {
  border-radius: 50%;
  height: 30px;
}

.fenleili {
  width: 30%;
  padding: 5px;
  background: #eee;
  margin: 5px;
  border-radius: 10px;
  text-align: center;
  vertical-align: middle;
  color: #000;
  float: left;
}

.gaoliang {
  background: #fc0;
}
</style>
